package com.lixinxin.commoncomposeproject.screen

import androidx.compose.animation.core.Spring
import androidx.compose.animation.core.animateDpAsState
import androidx.compose.animation.core.spring
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.navigation.NavController
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.VerticalPager
import com.google.accompanist.pager.rememberPagerState
import com.lixinxin.commoncomposeproject.model.ItemData
import com.lixinxin.commoncomposeproject.screen.util.Screen

/**
 * 引导页面
 */

@ExperimentalPagerApi
@Composable
fun GuideScreen(navController: NavController, items: List<ItemData>) {

    Surface(color = MaterialTheme.colors.background) {

        val state = rememberPagerState(pageCount = items.size)
        //vertical

        Column(
            Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Row(verticalAlignment = Alignment.CenterVertically) {
                VerticalPager(state = state, Modifier.weight(1f)) {
                    PagerContent(items[it],navController)
                }
                Indicator(size = items.size, index = state.currentPage)
                Spacer(modifier = Modifier.width(12.dp))
            }


        }

    }
}


@Composable
fun PagerContent(itemData: ItemData,navController: NavController) {
    Column(
        modifier = Modifier
            .padding(10.dp)
            .height(420.dp)
            .background(Color.White),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally

    ) {
        Image(
            painter = painterResource(id = itemData.imgId),
            contentDescription = itemData.title,
            modifier = Modifier.clickable {
                navController.navigate(Screen.ChatScreen.route)
            }
        )
        Text(
            text = itemData.title,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.h6
        )
        Text(
            text = itemData.content,
            textAlign = TextAlign.Center,
            style = MaterialTheme.typography.body1
        )
    }
}


@Composable
fun Indicator(size: Int, index: Int) {
    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.spacedBy(10.dp)

    ) {
        repeat(size) {
            IndicatorVertical(it == index)
        }
    }
}


@Composable
fun IndicatorVertical(isSelected: Boolean) {
    val height = animateDpAsState(
        targetValue = if (isSelected) 30.dp else 10.dp,
        animationSpec = spring(Spring.DampingRatioMediumBouncy)
    )

    Box(
        modifier = Modifier
            .height(height.value)
            .width(10.dp)
            .clip(CircleShape)
            .background(if (isSelected) Color.Black else Color.LightGray)
    ) {

    }

}